<script setup lang='ts'>
import {onMounted, reactive, ref} from 'vue';
import {financeApi} from '@/api/controller';
import {Toastloading} from '@/utils/public';
import PayRuleForm from './payRuleForm.vue';
import {ElMessageBox} from "element-plus";

const payRuleFormRef = ref()
const action = reactive({
  total: 0,
  list: [] as any[],
})

const handlePayRule = (row: any) => {
  const {rule_id, price, diamond_amount, diamond_desc, plat_type} = row;
  payRuleFormRef.value.openDialog({rule_id, price, diamond_amount, diamond_desc, plat_type})
}
const getList = async () => {
  const loading = Toastloading()
  let res = await financeApi.fetchPayRuleList({})
  res.data.data = res.data.data.map(function (item: any) {
    item.price = item.price / 100
    return item
  })
  loading.close()
  const {data = [], total = 0} = res.data
  action.total = total
  action.list = data
}
const add = () => {
  const data = {rule_id: 0, price: '', diamond_amount: '', diamond_desc: '', plat_type: 2}
  payRuleFormRef.value.openDialog(data)
}

const handleDel = (row: any) => {
  ElMessageBox.confirm('是否确认删除该记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const loading = Toastloading()
    try {
      await financeApi.delPayRule({rule_id: row.rule_id})
      loading.close()
      getList()
    } catch (error) {
      loading.close()
    }
  })
}


onMounted(() => {
  getList()
})
</script>

<template>
  <div class="xm-content">
    <div style="width:100%;display:flex;justify-content:space-between;padding-bottom:1em;">
      <el-button type="primary" class="xm-btn" @click="add">添加规则</el-button>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border
    >
      <el-table-column width="220" prop="rule_id" label="ID"/>
      <el-table-column width="220" prop="price" label="价格"/>
      <el-table-column width="120" prop="diamond_amount" label="钻石数量"/>
<!--      <el-table-column width="220" show-overflow-tooltip prop="diamond_desc" label="钻石描述"/>-->
      <el-table-column width="220" prop="plat_type" label="平台类型" >
        <template #default="{row}">
          <span>{{ row.plat_type === 2 ? '安卓' : '苹果' }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handlePayRule(scope.row)">配置</el-button>
          <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PayRuleForm ref="payRuleFormRef" @update-list="getList"/>
  </div>
</template>
